<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>navgator - css</title>
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
	<div class="container">
		<div class="st-container">
		<!--	nav begin  -->
			<input type="radio" name="radio-set" checked="checked" id="st-control-1">
			<a href="#st-panel-1">Serendipity</a>
			<input type="radio" name="radio-set" id="st-control-2">
			<a href="#st-panel-2">Happiness</a>
			<input type="radio" name="radio-set" id="st-control-3">
			<a href="#st-panel-3">Tranquillity</a>
			<input type="radio" name="radio-set" id="st-control-4">
			<a href="#st-panel-4">Positivity</a>
			<input type="radio" name="radio-set" id="st-control-5">
			<a href="#st-panel-5">Passion</a>
		<!--	nav end  -->

			<!--	下面的div必须在st-container这个div盒子里  -->
			<div class="st-scroll">
				<section class="st-panel" id="st-panel-1">
					<div class="st-desc" data-icon="H"></div>
					<h2>Serendipity</h2>
					<p>Banksy adipisicing eiusmod banb mi sed. Squid stumptown est odd future nisi,commodo mlkshk pop-up adipisicing retro.</p>
				</section>
				<section class="st-panel st-color" id="st-panel-2">
					<div class="st-desc" data-icon="2"></div>
					<h2>Happiness</h2>
					<p>Squid stumptown est odd future nisi,commodo mlkshk pop-up adipisicing retro. Banksy adipisicing eiusmod banb mi sed. </p>
				</section>
				<section class="st-panel" id="st-panel-3">
					<div class="st-desc" data-icon="B"></div>
					<h2>Tranquillity</h2>
					<p> Banksy adipisicing eiusmod banb mi sed. Squid stumptown est odd future nisi,commodo mlkshk pop-up adipisicing retro. Squid stumptown </p>
				</section>
				<section class="st-panel st-color" id="st-panel-4">
					<div class="st-desc" data-icon="x"></div>
					<h2>Positivity</h2>
					<p> Banksy adipisicing eiusmod banb mi sed. Squid stumptown est odd future nisi,commodo mlksh dipisicing eiusmod banb mi sed. </p>
				</section>
				<section class="st-panel" id="st-panel-5">
					<div class="st-desc" data-icon="g"></div>
					<h2>Passion</h2>
					<p> Banksy adipisicing eiusmod banb mi sed. Squid stumptown est odd future nisi,commodo mlkshk pop-up adipisicing retro.</p>
				</section>
			</div>

		</div>
		
	</div>
</body>
</html>